<template>
  <div class="dashboard-container">
    <div v-show="loginType === 2">
      <span style="font-size: 16px; text-indent: 2px">
        <span
          ><span style="color: red; font-weight: bold">文知将知识产权协作平台</span
          >以案件管理为核心，以客户管理为基础，把客户、案件和账务信息进行紧密关联，</span
        >
        <br />
        <span
          >来协助律师进行移动电子信息化办公，提高律师办案效率及维护客户关系的管理系统。</span
        >
      </span>
    </div>
    <div v-show="loginType === 1" style="background: #eaedf1">
      <div style="margin-top: 2px">
        <el-row>
          <el-col :span="16">
            <el-row>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #578ebe">
                  <div class="stat-icon">
                    <i class="el-icon-alarm-clock" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Pending_Official_Fees }}</span> 件
                    <br />
                    <br />
                    <span>待缴官费</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #44b6ae">
                  <div class="stat-icon">
                    <i class="el-icon-message" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Pending_Refunded_Fees }}</span> 件
                    <br />
                    <br />
                    <span>待退费</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #e35b5a">
                  <div class="stat-icon">
                    <i class="el-icon-message-solid" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Supplemental_Evidence }}</span> 件
                    <br />
                    <br />
                    <span>补充证据</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #8775a7">
                  <div class="stat-icon">
                    <i class="el-icon-s-comment" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Supplemental_Comments }}</span> 件
                    <br />
                    <br />
                    <span>补充意见</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #4f5c65">
                  <div class="stat-icon">
                    <i class="el-icon-shopping-cart-full" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Pending_Appeal }}</span> 件
                    <br />
                    <br />
                    <span>待上诉</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #14aae4">
                  <div class="stat-icon">
                    <i class="el-icon-s-order" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Pending_Execute }}</span> 件
                    <br />
                    <br />
                    <span>待执行</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #949fb1">
                  <div class="stat-icon">
                    <i class="el-icon-coffee-cup" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Urgent_Cases }}</span> 件
                    <br />
                    <br />
                    <span>紧急案件</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" style="background-color: #f29503">
                  <div class="stat-icon">
                    <i class="el-icon-money" />
                  </div>
                  <div class="stat-msg">
                    <span>{{ dashBoardData.Not_Accounted_Advance_Payment }}</span> 件
                    <br />
                    <br />
                    <span>未到账垫付款</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-card>
                  <div class="card-header">
                    <span>开庭排期</span>
                  </div>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" />
                    <el-table-column prop="case_code" label="案件编号" width="180">
                      <template slot-scope="scope">
                        <router-link :to="'/case/lawsuit/civil/edit/' + scope.row.id">
                          <span>{{ scope.row.case_code }}</span>
                        </router-link>
                      </template>
                    </el-table-column>
                    <el-table-column prop="case_name" label="案件名称" width="220" />
                    <el-table-column label="法院">
                      <template slot-scope="scope">
                        <span
                          v-if="
                            scope.row.three_court !== '' &&
                            scope.row.three_case_code !== ''
                          "
                        >
                          {{ scope.row.three_court }}
                        </span>
                        <span
                          v-else-if="
                            scope.row.two_court !== '' && scope.row.two_case_code !== ''
                          "
                        >
                          {{ scope.row.two_court }}
                        </span>
                        <span v-else>{{ scope.row.one_court }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="开庭时间">
                      <template slot-scope="scope">
                        <span
                          v-if="
                            scope.row.three_court !== '' &&
                            scope.row.three_case_code !== ''
                          "
                        >
                          {{ scope.row.three_hold_court_date }}
                        </span>
                        <span
                          v-else-if="
                            scope.row.two_court !== '' && scope.row.two_case_code !== ''
                          "
                        >
                          {{ scope.row.two_hold_court_date }}
                        </span>
                        <span v-else>{{ scope.row.one_hold_court_date }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-card>
              <div class="card-header">
                <span>案件日历</span>
              </div>
              <div id="caseCalendar" style="width: 100%; font-size: 16px">
                <el-calendar>
                  <template slot="dateCell" slot-scope="{ date, data }">
                    <p>
                      <el-checkbox
                        disabled
                        :class="
                          kaiTingData.findIndex((item) => item === data.day) !== -1
                            ? 'is-kaiTing'
                            : 'is-kaiTingNo'
                        "
                      />
                      <br />
                      {{ data.day.split("-").slice(2)[0] }}
                    </p>
                  </template>
                </el-calendar>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--      <div style="margin-top: 10px">-->
      <!--        <el-row>-->
      <!--          <el-col :span="16">-->
      <!--            <el-card>-->
      <!--              <div class="card-header">-->
      <!--                <span>开庭排期</span>-->
      <!--              </div>-->
      <!--              <el-table :data="tableData" style="width: 100%">-->
      <!--                <el-table-column type="index" label="序号" />-->
      <!--                <el-table-column prop="case_code" label="案件编号" width="180" />-->
      <!--                <el-table-column prop="case_name" label="案件名称" width="220" />-->
      <!--                <el-table-column label="法院">-->
      <!--                  <template slot-scope="scope">-->
      <!--                    <span v-if="scope.row.three_court !== '' && scope.row.three_case_code !== ''">-->
      <!--                      {{ scope.row.three_court }}-->
      <!--                    </span>-->
      <!--                    <span v-else-if="scope.row.two_court !== '' && scope.row.two_case_code !== ''">-->
      <!--                      {{ scope.row.two_court }}-->
      <!--                    </span>-->
      <!--                    <span v-else>{{ scope.row.one_court }}</span>-->
      <!--                  </template>-->
      <!--                </el-table-column>-->
      <!--                <el-table-column label="开庭时间">-->
      <!--                  <template slot-scope="scope">-->
      <!--                    <span v-if="scope.row.three_court !== '' && scope.row.three_case_code !== ''">-->
      <!--                      {{ scope.row.three_hold_court_date }}-->
      <!--                    </span>-->
      <!--                    <span v-else-if="scope.row.two_court !== '' && scope.row.two_case_code !== ''">-->
      <!--                      {{ scope.row.two_hold_court_date }}-->
      <!--                    </span>-->
      <!--                    <span v-else>{{ scope.row.one_hold_court_date }}</span>-->
      <!--                  </template>-->
      <!--                </el-table-column>-->
      <!--              </el-table>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--          <el-col :span="4">-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </div>-->
      <div style="margin-top: 10px">
        <el-row>
          <el-col :span="12">
            <el-card>
              <div class="card-header">
                <span>案件进度分布</span>
              </div>
              <div id="chartColumn" style="width: 100%; height: 680px" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="card-header">
                <span>案件进度分布</span>
              </div>
              <div id="chartMap" style="width: 100%; height: 300px" />
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 10px; height: 100px" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
import {
  GetDashboardData,
  GetDashboardCaseData,
  GetCaseStepEchartsData,
} from "@/api/data";
import store from "@/store";
import "echarts/map/js/china";
import router from "@/router";

export default {
  name: "Dashboard",
  components: { router },
  data() {
    return {
      loginType: store.getters.loginType,
      kaiTingData: ["2022-02-20"],
      currentRole: "adminDashboard",
      dashBoardData: {
        Pending_Official_Fees: 0,
        Pending_Refunded_Fees: 0,
        Supplemental_Evidence: 0,
        Supplemental_Comments: 0,
        Pending_Appeal: 0,
        Pending_Execute: 0,
        Urgent_Cases: 0,
        Not_Accounted_Advance_Payment: 0,
      },
      tableData: [],
    };
  },
  mounted() {
    this.drawLine();
    this.drawMap();
  },
  computed: {
    ...mapGetters(["roles"]),
  },
  created() {
    this.GetDashboardData();
    this.GetDashboardCaseData();
  },
  methods: {
    GetDashboardData() {
      GetDashboardData().then((res) => {
        console.log("GetDashboardData", res);
        this.dashBoardData.Pending_Official_Fees = res.data.pending_official_fees;
        this.dashBoardData.Pending_Refunded_Fees = res.data.pending_refunded_fees;
        this.dashBoardData.Supplemental_Evidence = res.data.supplemental_evidence;
        this.dashBoardData.Supplemental_Comments = res.data.supplemental_comments;
        this.dashBoardData.Pending_Appeal = res.data.pending_appeal;
        this.dashBoardData.Pending_Execute = res.data.pending_execute;
        this.dashBoardData.Urgent_Cases = res.data.urgent_cases;
        this.dashBoardData.Not_Accounted_Advance_Payment =
          res.data.not_accounted_advance_payment;
      });
    },
    GetDashboardCaseData() {
      const that = this;
      GetDashboardCaseData().then((res) => {
        console.log("GetDashboardCaseData", res);
        res.data = res.data==null?[]:res.data;
        that.tableData = res.data;
        that.kaiTingData = [];
        res.data.forEach(function (element, index, array) {
          if (element.three_hold_court_date !== "") {
            const hold_court_date = element.three_hold_court_date.split(" ")[0];
            that.kaiTingData.push(hold_court_date);
          } else if (element.two_hold_court_date !== "") {
            const hold_court_date = element.two_hold_court_date.split(" ")[0];
            that.kaiTingData.push(hold_court_date);
          } else if (element.one_hold_court_date !== "") {
            const hold_court_date = element.one_hold_court_date.split(" ")[0];
            that.kaiTingData.push(hold_court_date);
          }
        });
      });
    },
    drawLine() {
      GetCaseStepEchartsData().then((res) => {
        console.log("GetCaseStepEchartsData", res);
        let seriesData = res.data;
        this.chartColumn = echarts.init(document.getElementById("chartColumn"));
        this.chartColumn.setOption({
          tooltip: {
            trigger: "item",
          },
          legend: {
            bottom: 1,
            left: "center",
            icon: "circle",
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              data: seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      });
    },
    drawMap() {
      // 获取dom节点
      this.chartMap = echarts.init(document.getElementById("chartMap"));
      // option配置写在最下面的
      this.chartMap.setOption({
        // 设置 背景颜色
        backgroundColor: "#FFFFFF",
        tooltip: {
          trigger: "item",
        },
        // 左侧小导航图标
        visualMap: {
          // 是否显示指示条
          show: false,
          // 显示的位置
          splitList: [{ start: 0 }],
          color: ["yellow"],
        },
        // 配置属性
        series: [
          {
            name: "",
            type: "map", // 类型 为map地图
            // 具体地图类型为china 在这里需要引入echarts中自带的China.js文件
            mapType: "china",
            roam: false, // 设置是否可以缩放 false 为不可以缩放
            zoom: 1.2, // 默认缩放比例  刚进入页面时的缩放比例
            itemStyle: {
              normal: {
                areaColor: "#FFFFFF",
                borderColor: "skyblue",
                borderWidth: 1,
                shadowColor: "#FFFFFF",
                shadowBlur: 30,
                opacity: 1,
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 6,
                },
              },
              emphasis: {
                show: true,
              },
            },
            data: [{ name: "广东", value: 11 }],
          },
        ],
      });
    },
  },
};
</script>
<style>
.dashboard-container {
  text-align: center;
  font-size: xx-large;
}

.card-header {
  text-align: left;
  border-bottom: 1px inset;
  font-size: 12px;
  color: #475059;
}

.stat-icon {
  float: left;
  color: white;
}

.stat-msg {
  font-size: 12px;
  color: white;
}

.el-calendar-day p {
  margin-block-start: auto;
  margin-block-end: auto;
}

.is-kaiTing > span > span {
  background-color: red !important;
}

.is-kaiTingNo > span {
  display: none !important;
}

.el-calendar__body {
  padding: 0px !important;
}

.el-calendar__header {
  display: none;
}

.el-calendar-table .el-calendar-day {
  height: auto !important;
  padding: 0px !important;
}
</style>
